<template>
  <k-drawer v-model="visible" title="创建用户">
    <div v-if="isSuccess" class="success">
      <h3>用户创建成功</h3>

      <ul class="success-info">
        <li>
          <span class="success-label">用户ID:</span>
          <span class="success-value">{{ form.id }}</span>
        </li>
        <li>
          <span class="success-label">登陆账号:</span>
          <span class="success-value">{{ form.username }}</span>
        </li>
        <li>
          <span class="success-label">登陆密码:</span>
          <span class="success-value">
            <input :value="form.password"/>
          </span>
        </li>
        <li class="button">
          <el-button @click="visible = false" size="small">返回</el-button>
        </li>
      </ul>
    </div>

    <k-form @submit="onSubmit" ref="form" v-else>
      <k-form-item label="登陆账号">
        <el-input v-model="form.username"></el-input>
      </k-form-item>

      <k-form-item label="显示名称">
        <el-input v-model="form.nickname"></el-input>
      </k-form-item>

      <k-form-item label="登陆密码">
        <div>
          <el-radio-group v-model="pwdtype">
            <el-radio :label="0">系统随机生成默认密码</el-radio>
            <el-radio :label="1">自定义密码</el-radio>
          </el-radio-group>
        </div>

        <el-input v-if="pwdtype === 1" v-model="form.password"></el-input>
      </k-form-item>

      <k-form-item label="备注">
        <el-input v-model="form.remark" type="textarea" rows="4"></el-input>
      </k-form-item>
    </k-form>

    <div slot="footer" v-if="!isSuccess">
      <el-button type="primary" size="small"
                 @click="$refs.form.onSubmit()"
                 :loading="subing">确认创建</el-button>

      <el-button size="small" @click="visible = false">取消</el-button>
    </div>
  </k-drawer>
</template>

<script>
import { Vue, Component, Watch } from 'vue-property-decorator'
import randomstring from 'randomstring'
import KDrawer from '@/components/KDrawer'
@Component({
  components: {
    KDrawer
  },
  props: {
    value: Boolean
  }
})
export default class SafeAdminCreate extends Vue {
  form = {}
  pwdtype = 0
  subing = false
  isSuccess = false

  get visible() {
    return this.value
  }

  set visible(val) {
    this.$emit('input', val)
  }

  @Watch('pwdtype')
  onChangePwdtype (val) {
    if (val) {
      this.$set(this.form, 'password', '')
    }
  }

  // 提交
  onSubmit () {
    let fields = { ...this.form }
    if (!this.pwdtype) {
      fields.password = randomstring.generate()
    }
    this.subing = true
    this.$http.post('admin/safe/user', fields)
      .finally(() => this.subing = false)
      .then(result => {
        if (result.res_code === 0) {
          this.$message.success('创建成功')
          this.$set(this.form, 'username', fields.username)
          this.$set(this.form, 'password', fields.password)
          this.$set(this.form, 'id', result.data.id)
          this.$emit('success', result.data)
          this.isSuccess = true
        } else {
          this.$message.error(result.res_msg)
        }
      })
  }
}
</script>

<style scoped lang="scss">
.success {
  padding: 40px;
  h3 {
  }
  &-info {
    list-style: none;
    margin-top: 20px;
    font-size: 14px;
    li {
      line-height: 30px;
    }
    .button {
      margin-top: 20px;
    }
  }
  &-label {
    width: 140px;
  }
  &-value {
    word-break:break-all;
    input {
      padding: 5px;
      margin-left: 10px;
      border: solid 1px #ddd;
      width: 260px;
    }
  }
}
</style>
